<template>
  <view class="container" style="padding: 24px; box-sizing: border-box;">
    <!-- 顶部栏 -->
    <view class="top-bar">
      <uni-icons type="undo-filled" size="20" class="top-left" @click="goBack">返回</uni-icons>
    </view>

<!-- 场景选择提示文本框 -->
		<view class="text-box-wrapper">
			<view class="text-box"></view>
		</view>

    <!-- 按钮区域 -->
    <view class="btn-area">
		<u-cell-group style="width: 92%; border-radius: 15px; overflow: hidden; background-color: white; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);">
			<u-cell
				class="cell"
				icon="order"
				icon-style="font-size: 22px; color: #71B5A0"
				title="更换集控柜处集中器(低压工作票)"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/low/low?value=l21"
			></u-cell>
			<u-cell
				class="cell"
				icon="order"
				icon-style="font-size: 22px; color: #71B5A0"
				title="更换计量箱处集中器(低压工作票)"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/low/low?value=l22"
			></u-cell>
		</u-cell-group>
      <!-- <button @click='toLow("l6")' class="btn-item">1.更换分线盒处三相表(配电工作票)</button>
      <button @click='toLow("l9")' class="btn-item">2.更换分线盒处三相表(低压工作票)</button>
	  <button @click='toLow("？？？")' class="btn-item">3.更换下火线处三相表(配电工作票)</button>
	  <button @click='toLow("l10")' class="btn-item">4.更换下火线处三相表(低压工作票)</button> -->
    </view>
  </view>
</template>

<script>
	export default {
		methods: {
			goBack() {
			  uni.navigateBack();
			},
			toLow(e) {
			    uni.navigateTo({
			        url: `/pages/low/low?value=${e}` // 使用模板字符串和查询参数
			    })
			}
		}
	}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	height: 100vh;

}

.top-bar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.top-left {
	font-size: 28rpx;
	color: black;
	padding: 0 20rpx;
	
}

.text-box-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 60rpx; /* 距离顶部一定的间距 */
}

.text-box {
	width: 80%; /* 控制文本框宽度 */
	display: flex;
	padding: 2%;
	justify-content: center;
	align-items: center;
	font-size: 38rpx;
	color: black;
	font-style: oblique;
	font-weight: bold;
	letter-spacing: 0.5em;
}


.btn-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 20%; /* 将按钮下移 */
}


.btn-item {
  margin-bottom: 60rpx;
  width: 80%;
  font-weight: 550;
  background-color: #55ff7f;
}

/* 修改u-cell-group样式 */
:deep(.u-cell-group) {
	border-radius: 15px !important;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
	background: white !important;
	padding: 10rpx 0;
}

/* 修改u-cell样式 */
:deep(.u-cell) {
	margin: 15rpx 0;
	background: white !important;
	transition: all 0.3s ease;
	padding: 25rpx 30rpx !important;
	height: auto !important;
}

:deep(.u-cell__title) {
	font-size: 32rpx !important;
	line-height: 1.5 !important;
}

:deep(.u-cell:not(:last-child)) {
	border-bottom: 1px solid rgba(113, 181, 160, 0.2) !important;
	margin-bottom: 8rpx;
}

:deep(.u-cell:active) {
	background: rgba(113, 181, 160, 0.08) !important;
	transform: scale(0.98);
}
</style>
